<template>
    <div>
        <Row :gutter="10">
            <Col span="24">
            <Card class="slideList">
                <p slot="title" style="height: 26px">
                    <Icon type="ios-albums-outline"></Icon>
                    举报列表
                </p>
                <div class="edittable-table-height-con">
                    <Table :columns="slideTableHead" :data="accuseList" border :no-filtered-data-text="tipeNews" :no-data-text="tipeNews" ref="slideTableHead"></Table>
                </div>
            </Card>
            </Col>
        </Row>
        <Page :total="total" :current="page" :page-size="pageSize" @on-change="onCurrentChange" style="text-align: center"></Page>
    </div>
</template>
<script>
    export default {
        data () {
            return {
                //表头
                slideTableHead:[
                    {
                        title: '编号',
                        align: 'center',
                        key: 'id',
                        "sortable": true,
                    },
                    {
                        title: '被举报人',
                        align: 'center',
                        key: 'toName',
                    },
                    {
                        title: '被举报人ID',
                        align: 'center',
                        key: 'target',
                        "sortable": true,
                    },
                    {
                        title: '举报人',
                        align: 'center',
                        key: 'fromName',
                    },
                    {
                        title: '举报内容',
                        align: 'center',
                        key: 'content',
                    },
                    {
                        title: '举报类型',
                        align: 'center',
                        key: 'type',
                    },
                    {
                        title:'是否已读',
                        key:'is_read',
                        align:'center',
                        filters: [
                            {label: '未读', value: 0},
                            {label: '已读',value: 1},
                        ],
                        filterMultiple:false,
                        filterMethod (v,r){
                            if (v === 0) {
                                return r.is_read === 0;
                            } else if (v === 1) {
                                return r.is_read === 1;
                            }
                        },
                        render(h,params,index){
                            const row = params.row;
                            if(row.is_read=="0"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#990000'
                                        },
                                    }, '未读'),
                                ]);
                            }else if (row.is_read=="1"){
                                return h('div', [
                                    h('div', {
                                        style: {
                                            color:'#19be6b'
                                        },
                                    }, '已读'),
                                ]);
                            }
                        },
                    },
                    {
                        title: '举报时间',
                        align: 'center',
                        key: 'time',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width: 190,
                        align: 'center',
                        render: (h, params) => {
                            const row=params.row;
                            if(row.is_read=="0"){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.changeIsRead(params.index)
                                            }
                                        }
                                    }, '标记已读'),

                                ]);
                            }else{
                                return h('div', [])
                            }
                        }
                    }
                ],
                selectURl:'/accuse/list',
                changeIsReadURl:'/accuse/looked',
                accuseList:[],
                tipeNews:'暂无数据',
                total:0,
                pageSize:0,
                page:1,

            }
        },
        created () {
            this.getData();
        },
        methods: {
            //初始化时获取数据
            getData () {
                let self = this;
                self.$axios.get(self.selectURl + '?curr=' + self.page).then((res) => {
                    for (var i = 0; i < res.data.data.rows.length; i++) {
                        let time = new Date(res.data.data.rows[i].time).toLocaleString();
                        res.data.data.rows[i].time = time;
                    }
                    self.accuseList = res.data.data.rows;
                    self.page = res.data.data.page;
                    self.pageSize = res.data.data.pagesize;
                    self.total = res.data.data.total;
                })
            },
            changeIsRead(index){
                let self=this;
                let accuseIsRead = self.accuseList[index];
                self.$axios.post(self.changeIsReadURl+'/'+accuseIsRead.id).then((res) => {
                    if (res.data.code==200){
                        self.$Message.success('恭喜您，标记成功');
                        self.getData();
                    }else {
                        self.$Message.error('抱歉，标记失败。请稍后重试!');
                        self.getData();
                    }
                })
            },
            onCurrentChange(val){
                let self = this;
                self.page = val;
                self.getData();
            }
        }
    }
</script>